<template>
<div>
  <header>
    <span>荣誉名称：</span><Input v-model="queryData.honor_name" placeholder="请输入荣誉的名称" style="width: 300px"/>
    <Button type="primary" @click="queryList" class="query">查询</Button>
    <Button @click="reset" class="reset">重置</Button>
<!--    <Button @click="add" class="add">添加新的荣誉</Button>-->
  </header>
  <div style="margin-top:10px">
    <Table stripe :columns="columns1" :data="data1">
      <template slot-scope="{ row }" slot="iconImg">
        <img :src="row.honorImage" style="height: 80px;width: 80px"/>
      </template>
      <template slot="action" slot-scope="{ row, index }">
        <Button type="primary" @click="modify(index)" size="small">修改积分</Button>
<!--        <Button type="success" @click="showDeleteModal(index)" size="small">删除</Button>-->
      </template>
    </Table>
  </div>
  <div style="margin: 10px;overflow: hidden">
    <div style="float: right;">
      <Page :total="100" :current="queryData.currentPage" @on-change="changePage"  @on-page-size-change="changeSize" show-elevator show-sizer></Page>
    </div>
  </div>
  <Modal v-model="modal3"
         title="更新"
         ok-text="更新"
         cancel-text="取消"
         @on-ok="modifyScore"
         @on-cancel="cancel">
    <Form>
      <FormItem>
        <span>积分：</span><Input type="text" v-model="updateForm.honorScore" style="width: 400px"></Input>
      </FormItem>
      <FormItem>
        <span>荣誉图片：</span><input type="file" ref="myfile2"></input>
      </FormItem>
    </Form>
  </Modal>
</div>
</template>

<script>
import {
  addHonorType,
  deleteHonorById,
  getHonorByName, updateHonorById,
  uploadHonorForm,
} from "../../../../api/data";

export default {
  name: "honor_setting",
  data() {
    return{
      modal1: false,
      modal2: false,
      modal3: false,
      selected: 0,
      queryData:{
        honor_name: '',
        page: '1',
        limit: '10'
      },
      updateForm:{
        honorId: '',
        honorName: '',
        honorImage: '',
        honorScore:'',
        honorCreateTime: ''
      },
      honor:{
        addForm:{
          name: '',
          image: '',
        },
        formImage: ''
      },
      columns1: [
        {
          title: '编号',
          key: 'honorId',
          width: 150
        },
        {
          title: '名称',
          key: 'honorName'
        },
        {
          title: '图片',
          key: 'honorImage',
          slot: 'iconImg',
          align: 'center'
        },
        {
          title: '获得条件',
          key: 'honorDescription'
        },
        {
          title: '积分',
          key: 'honorScore'
        },
        {
          title: '操作',
          key: 'action',
          slot: 'action',
          align: 'center'
        }
      ],
      data1: [
      ]
    }
  },
  methods:{
    reset(){
      this.query.honor_name=''
    },
    add(){
      this.modal3=true
    },
    submit(){

    },
    cancel(){

    }
    ,changePage(pageNumber) {
      this.queryData.page = pageNumber
      this.queryList()
    },
    changeSize(pageSize) {
      this.queryData.limit = pageSize
    },
    modifyScore(){
        console.log(this.updateForm)
        updateHonorById(this.updateForm).then(res=>{
          this.$Message.info(res.data.message)
        }).catch(err => {
          alert(err.message())
        })
      this.queryList()
    },
    uploadForm2(){
      let myfile = this.$refs.myfile2;
      let files = myfile.files;
      var formData = new FormData();
      if(files.length!=0){
        let file = files[0];
        formData.append("file", file);
      }else{
        formData.append("file", new File([],"empty"));
      }
      formData.append("name",this.addForm.honorName);
      addHonorType(formData).then(res=>{
        this.$Message.info(res.data.message)
      }).catch(err=>{
        this.$alert(err.data.message)
      })
      this.queryList();
    },
    queryList() {
      getHonorByName(this.queryData).then(res=>{
        res.data.obj.forEach(item=>{
          item.honorImage='data:image/jpeg;base64,'+item.honorImage;
          let time=item.honorCreateTime;
          item.honorCreateTime=time[0]+'-'+time[1]+'-'+time[2]+' '+time[3]+':'+time[4]+':'+time[5];
        })
        this.data1=res.data.obj;
        console.log(this.data1)
      }).catch(err => {
        alert(err.message())
      })
    },

    modify(index) {
      this.modal3=true;
      this.selected = index;
      this.updateForm.honorId=this.data1[index].honorId;
      this.updateForm.honorScore=this.data1[index].honorScore;
    },

    deleteHonor() {
      deleteHonorById(this.data1[this.selected].honorId).then(res=>{
        this.$Message.info(res.data.message)
      }).catch(err=>{
        this.$alert(err.data.message)
      })
    },
    ok() {

    },
    click() {

    }
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>
